<template>

	<view class="x-goods-home-list" v-if="goods && goods.length>0">
		<view class="layout">

			<image class="range-image" src="@/static/home/frame.png" mode="widthFix" @load="emitLoaded"></image>

			<view class="recommend-title">
				<image class="left-img" src="@/static/home/left.png" mode="widthFix"></image>
				<view class="title">{{title}}</view>
				<image class="right-img" src="@/static/home/right.png" mode="widthFix"></image>
			</view>

			<swiper v-if="frameImageLoaded" scroll-x class="h-scroll-view" :indicator-dots="true"
				indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#666" :circular="true"
				:style="{'margin-left': visablePaddingRPX.left+'rpx', 'margin-top':visablePaddingRPX.top+'rpx', 'margin-right':visablePaddingRPX.right+'rpx', 'width':visiableWidthRPX+'rpx', 'height':visiableHeightRPX+'rpx'}">

				<swiper-item class="item" v-for="(item, index) in goods" :key="index" @click="onGotoItemDetail(item)"
					:style="{'width':'100%', 'height': '100%'}">
					<view class="img-container" style="height:70%;">
						<x-image class="x-image" :src="`${imageUrl}${item.filePath}`" mode="heightFix"></x-image>

					</view>

					<view class="item-name x-text-multi">{{item.goodsName}}</view>

					<view class="presale-product" v-if="item.goodsType===1">敬请期待</view>
					<view class="price" v-else>
						<price class="price" :value="item.goodsPrice" />
						<!-- <view v-if="userInfo" class="estimate">
							<view class="desc">预估会员价:</view>
							<view class="symbol">¥</view>
							<view class="value">{{(item.goodsPrice * (userInfo.discountRate*1.0/10)).toFixed(2)}}</view>
						</view> -->
						
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex'
	import XImage from '@/components/image/xImage.vue'
	
	import XEstimatePrice from '@/components/price/xEstimatePrice.vue'
	
	export default {
		computed: {
			...mapState(['userInfo', 'device'])
		},
		components: {
			XImage,
		},
		props: {
			title: {
				type: String,
			},
			goods: {
				type: Array,
				default: []
			},
			type: {
				type: Number,
				default: 0, //0，表示没有库存，显示正常价格， 1，表示敬请期待，不显示价格
			}
		},
		data() {
			return {
				imageUrl: this.$Config.imageUrl,
				visiableWidthRPX: 0,
				visiableHeightRPX: 0,
				frameImageLoaded: false,
				visablePaddingRPX: {
					top: 80,
					left: 24,
					bottom: 60,
					right: 24,
				},
			}
		},
		methods: {
			onGotoItemDetail(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.goodsId
				})
			},
			emitLoaded(e) {
				console.log("e=", e)
				let {
					width,
					height
				} = e.detail

				let totalImageHeightRPX = height * (750 * 1.0 / width).toFixed(0)
				this.visiableWidthRPX = 750 - (this.visablePaddingRPX.left + this.visablePaddingRPX.right)
				this.visiableHeightRPX = totalImageHeightRPX - (this.visablePaddingRPX.top + this.visablePaddingRPX.bottom)

				this.frameImageLoaded = true
				console.log("imgW=", width, ',imgHeight=', height, ",totalImageHeightRPX=", totalImageHeightRPX,
					",visiableHeightRPX=", this.visiableHeightRPX)
			},
		}
	}
</script>

<!-- 绘制滑动点 -->
<style lang="scss" scoped>
	.dot {
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;

		.active {
			background: rgb(66, 66, 66);
			width: 36rpx;
			height: 16rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.inactive {
			background: rgb(127, 127, 127);
			/* 宽度 */
			width: 16rpx;
			height: 16rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}
	}
</style>

<style lang="scss" scoped>
	.x-goods-home-list {
		position: relative;
		margin-bottom: 20rpx;
		margin-top: 20rpx;

		.layout {
			position: relative;

			.range-image {
				// position: absolute;
				left: 0;
				top: 0;
				width: 100%;
			}

			.recommend-title {
				position: absolute;
				left: 0;
				top: 0;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				// margin-top: 25rpx;


				.left-img,
				.right-img {
					width: 40rpx;
				}

				.title {
					background-image: linear-gradient(30deg, #D6B682, #F1E7D5, #D9BA8B);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					font-size: 40rpx;
					font-weight: 800;
					text-shadow: 2px -1px 4px rgba(214, 182, 130, 0.5);
					margin: 0 10rpx;
				}


			}

			.h-scroll-view {
				position: absolute;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
				overflow: hidden;
				background: white;

				// margin-left: 10px;
				// margin-top: 30px;
				// margin-right: 10px;
				// width: 355px;
				// height: 377px;
				// z-index: -1;

				.item {
					display: inline-block;
					width: 100%;
					height: 100%;
					vertical-align: middle;

					.img-container {
						margin-top: 20rpx;
						position: relative;
						overflow: hidden;
						display: flex;
						justify-content: center;

						.x-image {
							display: flex;
							justify-content: center;
							align-item: center;
							height: 100%;
							position: absolute;
						}

						// .presale-product {
						// 		position: absolute;
						// 		right: 0;
						// 		text-align: right;
						// 		transform: rotate(45deg);
						// 		margin-top: 45rpx;
						// 		color: red;
						// 		font-size: 44rpx;
						// }

						// .sale-out-mask {
						// 	position: absolute;
						// 	right: 0;
						// 	text-align: right;
						// 	transform: rotate(45deg);
						// 	margin-top: 45rpx;
						// 	color: red;
						// 	font-size: 44rpx;
						// 	// transform: rotate(45deg);
						// 	// position: absolute;
						// 	// left: 50%;
						// 	// top: 50%;
						// 	// -webkit-transform: translate(-50%, -50%);
						// 	// transform: translate(-50%, -50%);
						// 	// background-color: rgba(255, 255, 255, 0.7);
						// 	// display: flex;
						// 	// width: 100%;
						// 	// height: 100%;
						// 	// justify-content: center;
						// 	// align-items: center;
						// 	// color: #999;
						// 	// font-weight: 500;
						// }
					}


					.item-name {
						font-size: 30rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #2D2D2D;
						line-height: 36rpx;
						margin: 10rpx 32rpx 0;
						white-space: break-spaces;
						text-align: center;
					}

					.presale-product {
						// position: absolute;
						// right: 0;
						// text-align: right;
						// transform: rotate(45deg);
						// margin-top: 45rpx;
						width: 100%;
						color: red;
						font-size: 30rpx;
						text-align: center;
						margin: 10rpx;
						color: red;
					}

					.price {
						display: flex;
						margin: 20rpx 32rpx 20rpx;
						justify-content: center;
						align-items: center;
						
						.price {
							display: flex;
							align-items: flex-end;
							justify-content: center;
							color: #2d2d2d;
							// margin-top: 10rpx;
						}

						.x-estimate {
							margin-left: 10rpx;
						}
						// .estimate {
						// 	display: flex;
						// 	align-items: baseline;
						// 	font-size: 26rpx;
						// 	padding: 4rpx;
						// 	border-radius: 2rpx;
						// 	justify-content: center;
						// 	background: #CAAA81;
						// 	color: white;
						// 	margin-left: 20rpx;

						// 	.desc {
						// 		height: 25rpx;
						// 		font-size: 25rpx;
						// 		font-family: PingFang-SC-Bold, PingFang-SC;
						// 		font-weight: bold;
						// 		line-height: 25rpx;
						// 	}

						// 	.symbol {
						// 		height: 30rpx;
						// 		font-size: 20rpx;
						// 		font-family: PingFang-SC-Bold, PingFang-SC;
						// 		font-weight: bold;
						// 		line-height: 30rpx;
						// 		margin-left: 10rpx;
						// 	}

						// 	.value {
						// 		margin-left: 2rpx;
						// 		height: 35rpx;
						// 		font-size: 25rpx;
						// 		font-family: PingFang-SC-Bold, PingFang-SC;
						// 		font-weight: bold;
						// 		line-height: 35rpx;
						// 	}
						// }
					}





				}







			}

		}
	}
</style>